<template>
    <div class="info"> 
        <div class="row">
            <div class="col">拍卖会:</div>
            <div class="col">{{data.auction}}</div>
        </div>
        <div class="row">
            <div class="col">作者:</div>
            <div class="col">{{data.author}}</div>
        </div>
        <div class="row">
            <div class="col">作者生卒:</div>
            <div class="col">{{data.author_birthday}}</div>
        </div>
        <div class="row">
            <div class="col">形式:</div>
            <div class="col">{{data.auction_site}}</div>
        </div>
        <div class="row">
            <div class="col">尺寸:</div>
            <div class="col">{{data.measurement}}</div>
        </div>
        <div class="row">
            <div class="col">创作年代:</div>
            <div class="col">{{data.age}}</div>
        </div>
        <div class="row details" v-html="data.details"></div>
         <div class="row">
            <div class="col">拍卖时间:</div>
            <div class="col">{{data.shelf_time}}</div>
        </div>
         <div class="row">
            <div class="col">拍卖场次:</div>
            <div class="col">{{data.auction_pref}}</div>
        </div>
    </div>
</template>

<script>
    export default {
        props:['data'],//保存了拍品的详细信息
        filters:{
            age(value){
                if(value) {
                    return value.split('(')[1].slice(0,4)
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
.info{
        margin-bottom: 3.5em;
        padding: 15px;
        .row {
            display: flex;
            font-size: 0.9em;
            align-items:center;
            padding-bottom: 15px;
            &.details{
                line-height: 1.56em;
            }
            .col {
                &:first-child{
                    flex-basis: 5em;
                }
                &:nth-child(2){
                    flex: 1;
                }
                padding-right: 10px;
            }
        }
    }
</style>